<template>
  <el-table :data="arr1" style="width: 100%">
    <el-table-column label="序号" prop="shuju" />
    <el-table-column label="图片">
      <template #default="scope">
        <img :src="scope.row.img1" alt="" width="100px" height="100px" />
      </template>
    </el-table-column>
    <el-table-column label="名称" prop="proname" />
    <el-table-column label="品牌" prop="brand" />
    <el-table-column label="分类" prop="category" />
    <el-table-column label="原价" prop="originprice" />
    <el-table-column label="折扣" prop="discount" />
    <el-table-column label="销量" prop="sales" />

    <el-table-column align="right" label="是否售卖">
      <template #default="scope">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="scope.row.isrecommend"
          @click="zhuangtai(scope.row, 0)"
        />
      </template>
    </el-table-column>
    <el-table-column align="right" label="是否秒杀">
      <template #default="scope">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="scope.row.isseckill"
          @click="zhuangtai(scope.row, 1)"
        />
      </template>
    </el-table-column>
    <el-table-column align="right" label="是否推荐">
      <template #default="scope">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="scope.row.issale"
          @click="zhuangtai(scope.row, 2)"
        />
      </template>
    </el-table-column>
    <el-table-column align="right" label="操作" #default="scope">
      <el-button @click="chakan(scope.row)">查看详情</el-button>
      <el-button @click="shanchu(scope.row.proid)">删除</el-button>
    </el-table-column>
  </el-table>

  <!-- 控制 div 的显示 -->
  <div v-if="selectedRow">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="名称">
        <el-input v-model="selectedRow.proname" />
      </el-form-item>
      <el-form-item label="品牌">
        <el-input v-model="selectedRow.brand" />
      </el-form-item>
      <el-form-item label="分类">
        <el-input v-model="selectedRow.category" />
      </el-form-item>
      <el-upload
        v-model:file-list="fileList"
        action="http://localhost:3001/admin/file/upload"
        list-type="picture-card"
        name="img"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
      <!-- 其他表单项 -->
      <el-form-item>
        <el-button type="danger" @click="closeDetails">关闭</el-button>
        <el-button type="danger" @click="xiugai(selectedRow.proid)"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>

  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageSize"
    v-model:current-page="currentPage"
    @change="pageChange"
  />
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import http from "@/untils/http";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const fileList = ref([]); // 用于存储上传的文件列表

// 分页相关的状态
const currentPage = ref(1);
const pageSize = ref(10); // 每页显示的条目数
const total = ref(0); // 总条目数

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

function handleRemove() {
  // 处理文件删除逻辑
}

// 状态变量
const selectedRow = ref(null);
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const arr1 = ref([]);

const onSubmit = () => {
  console.log("submit!");
};

function chakan(row: any) {
  selectedRow.value = row; // 设置当前选中的行
  // 假设 selectedRow 中有一个 imgs 字段，包含图片的 URL
  fileList.value =
    row.imgs.map((img) => ({
      name: img.split("/").pop(), // 提取文件名
      url: img, // 使用图片的 URL
    })) || []; // 初始化 fileList
}

function closeDetails() {
  selectedRow.value = null; // 清空选中的行，隐藏 div
}

function pageChange() {
  liebiao(); // 当页码变化时重新加载数据
}

function xiugai(proid: any) {
  http({
    url: "http://localhost:3001/admin/pro/product/" + proid,
    method: "patch",
    headers: {
      token: localStorage.getItem("xxMallAdminToken"),
    },
    data: {
      proname: selectedRow.value.proname,
      brand: selectedRow.value.brand,
      category: selectedRow.value.category,
      imgs: fileList.value.map((file) => file.url), // 发送当前的图片 URL
    },
  }).then((r) => {
    console.log(r.data);
  });
}

function shanchu(proid: any) {
  http({
    url: `/admin/pro/product/${proid}`,
    method: "delete",
    headers: {
      token: localStorage.getItem("xxMallAdminToken"),
    },
  }).then((r) => {
    console.log(r.data);
    liebiao();
  });
}

function liebiao() {
  http({
    url: "/admin/pro/list",
    method: "GET",
    headers: {
      token: localStorage.getItem("xxMallAdminToken"),
    },
    params: {
      count: currentPage.value, // 当前页码
      limitNum: pageSize.value, // 每页条目数
    },
  }).then((r) => {
    console.log(r.data);
    arr1.value = r.data.data;
    total.value = r.data.total; // 假设返回的数据中有总条目数
  });
}

const mei = ["isrecommend", "isseckill", "issale"];
function zhuangtai(r: any, num: any) {
  http({
    url: "/admin/pro/updateFlag",
    method: "POST",
    headers: {
      token: localStorage.getItem("xxMallAdminToken"),
    },
    data: {
      proid: r.proid,
      type: mei[num],
      flag: r.isrecommend ? 1 : 0,
    },
  }).then((r) => {
    console.log(r.data);
  });
}

onMounted(() => {
  liebiao(); // 组件挂载时加载数据
});
</script>

<style lang=""></style>
